<!-- 订单 -->
<template>
  <div>
          <!-- 面包屑 -->
     <el-breadcrumb separator="/" class="header">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
     </el-breadcrumb>

      <!-- 卡片 -->
      <el-card>
            <!-- 搜索 -->
            <el-input v-model.number="query" placeholder="请输入订单id" class="input" ></el-input>
            <el-button icon="el-icon-search" @click="zhidaoclickO" :disabled="false"></el-button>

            <!--表格数据  -->
             <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                label="#"
                type="index"
                width="60">
              </el-table-column>
              <el-table-column
                prop="order_number"
                label="订单编号"
                width="260">
              </el-table-column>
               <el-table-column
                prop="order_price"
                label="订单价格"
                width="260">
              </el-table-column>
              <el-table-column
                label="是否付款"
                 width="180">
                 <template v-slot="tableData">
                       <el-button type="danger"  v-if="tableData.row.order_pay" disabled>未付款</el-button>
                       <el-button type="primary" v-else disabled>已付款</el-button>
                 </template>
              </el-table-column>
               <el-table-column
                prop="is_send"
                label="是否发货"
                width="180">
              </el-table-column>
               <el-table-column
                label="下单时间"
                width="180">
                <template v-slot="tableData">
                        {{tableData.row.create_time | fmtdate}}
                </template>
              </el-table-column>
              <el-table-column
                prop="id"
                label="操作">
                <template>
                  <el-button type="primary" icon="el-icon-edit" circle></el-button>
                  <el-button type="success" icon="el-icon-check" circle ></el-button>
                  <el-button type="danger"   icon="el-icon-delete" circle  ></el-button>
                </template>
             </el-table-column>
            </el-table>

            <!-- 分页 -->
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[2,4]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
      </el-card>
  </div>
</template>

<script>
import {getorders,getorderone} from "network/order"
export default {
name:"order",
created () {
  getorders(this.query,this.pagenum,this.pagesize).then(res=>{
    console.log(res)
    this.tableData=res.data.data.goods
    this.total=res.data.data.total
  })
},
data () {
  return {
     query:"",
     pagenum:1,
     pagesize:4,
     tableData:[],
     total:0,
     falg:true
  }
},
methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        // 实现点击分页
        this.pagenum=val
        this.tableData.lenth=0
        getorders(this.query,this.pagenum,this.pagesize).then(res=>{
          console.log(res)
          this.tableData=res.data.data.goods
          this.total=res.data.data.total
  })
      },
      // 查询
      zhidaoclickO(){
        if(this.query==""){
           
         
            if(!this.falg){
                getorders(this.query,this.pagenum,this.pagesize).then(res=>{
                console.log(res)
                this.tableData=res.data.data.goods
                this.total=res.data.data.total  
               })
            }else{
                 this.$message.error("请先输入订单号")
            }
             this.falg=true
        }else{
            getorderone(this.query).then(res=>{
              console.log(res)
              this.tableData=[res.data.data]
              this.total=1
            })
            this.falg=false
        }
         
       
      }
}
}

</script>
<style scoped>
      .header{
            margin-bottom: 15px;
            font-size: 17px;
        }
        .input{
            margin-left: 15px;
            margin-top: 10px;
            width: 300px;
        }
</style>